<template>
  <div class="page-one-type">
    <Tab :onRefresh="onRefresh" :currentType="currentType" :onChangeTab="onChangeTab"></Tab>
    <!-- <div class="type-name" @dblclick="onRefresh">{{ currentType }}</div> -->
    <!-- 动火作业分级 -->
    <div class="work-level-list-wrapper" v-if="currentType === '动火作业'">
      <div class="work-level-item" v-for="(level, index) in workLevels" :key="level.level" ref="workLevelItem">
        <div class="work-level-item__title" :class="{
          'level-s': level.level == 0,
          'level-1': level.level == 1,
          'level-2': level.level == 2,
        }" @dblclick="onDhRefresh(level, index)">
          {{ level.title }}
        </div>
        <div class="work-level-item__list">
          <PageScroll :probeType="index" :itemInfo="{ ...level, currentType: currentType }" fromType="oneTypeFire">
          </PageScroll>
        </div>
      </div>
    </div>
    <!-- 其他 -->
    <div class="work-list-wrapper" v-else ref="workListWrapper">
      <PageScroll :probeType="index" :itemInfo="level" fromType="oneType">
      </PageScroll>
    </div>
  </div>
</template>

<script>
import WorkItem from './components/WorkItem.vue';
import PageScroll from './components/PageScroll';
// import { getDataByCategory, getDataByDhCategory } from '@/apis';
import Tab from './components/Tab.vue';

const PAGE_SIZE = 20;
export default {
  components: { WorkItem, PageScroll, Tab },
  data() {
    return {
      currentType: '',
      workLevels: [
        {
          level: 0,
          title: '特级动火',
          workList: [],
        },
        {
          level: 1,
          title: '一级动火',
          workList: [],
        },
        {
          level: 2,
          title: '二级动火',
          workList: [],
        },
      ],
      loading: true,
      page: {
        current: 1,
        totalPage: 0,
      },
      workList: [],
      pageScrollKey: new Date().getTime(),
    };
  },
  created() {
    const { type } = this.$route.query;
    if (type) {
      this.currentType = type;
    }
  },
  methods: {
    onChangeTab(val) {
      let scroll
      if (val == '动火作业') {
        scroll = this.$refs.dhPageScroll;
      } else {
        scroll = this.$refs.pageScroll;
      }
      this.currentType = val;
      if (scroll) {
        if (val == '动火作业') {
          this.workLevels.forEach((level, index) => {
            this.onDhRefresh(level, index);
          });
        } else {
          this.workList.data = [];
          scroll.autoPullDownRefresh();
        }
      }
    },
    onDhRefresh(level, index) {
      // const scrolls = this.$refs.dhPageScroll;
      // const scroll = scrolls && scrolls[index];
      // if (scroll) {
      //   level.workList = [];
      //   scroll.autoPullDownRefresh();
      // }
    },
    onRefresh() {
      return;
      if (this.currentType != '动火作业') {
        const scroll = this.$refs.pageScroll;
        if (scroll) {
          this.workList.data = [];
          scroll.autoPullDownRefresh();
        }
      } else {
        this.workLevels.forEach((level, index) => {
          this.onDhRefresh(level, index);
        });
      }
    },
    onInited(scroll) {
      scroll.autoPullDownRefresh();
    },
    fetchData(scroll) {
      return;
      let cur = scroll.page.current;
      const params = {
        pageNum: scroll.page.current,
        pageSize: PAGE_SIZE,
        category: this.currentType,
      };
      this.getAxios(this.$queryFormDataByCategory, params).then((res) => {
        if (res.code == 0) {
          scroll.setTotalPage(res.page.totalPage);
          let list = res.page.list;
          if (cur == 1) {
            this.workList = list;
          } else {
            this.workList = this.workList.concat(list);
          }
        }
      }).finally(() => {
        if (cur == 1) {
          scroll.finishPullDown();
        } else {
          scroll.finishPullUp();
        }
        this.$nextTick(() => {
          scroll.refresh();
        });
      }).catch(() => { });
    },
    // 动火分级下拉刷新
    onDhPullingDown(level, scroll) {
      this.fetchDhData(level, scroll);
      // const list = this.fetchDhData(level, scroll);
      // level.workList = list;
      // scroll.finishPullDown();
      // this.$nextTick(() => {
      //   scroll.refresh();
      // });
    },
    // 动火分级上拉加载
    onDhPullingUp(level, scroll) {
      this.fetchDhData(level, scroll);
      // const list = this.fetchDhData(level, scroll);
      // level.workList = level.workList.concat(list);
      // scroll.finishPullUp();
      // this.$nextTick(() => {
      //   scroll.refresh();
      // });
    },
    fetchDhData(level, scroll) {
      return;
      // const params = {
      //   pageNum: scroll.page.current,
      //   pageSize: PAGE_SIZE,
      //   level: level.level,
      // };
      // const res = await getDataByDhCategory(params);
      // scroll.setTotalPage(res.page.totalPage);
      let cur = scroll.page.current
      const params = {
        pageNum: scroll.page.current,
        pageSize: PAGE_SIZE,
        level: level.level,
        portName: this.portName,
      };
      this.getAxios(this.$queryFormDataByDHCategory, params).then((res) => {
        if (res.code == 0) {
          let list = res.page.list;
          if (cur == 1) {
            level.workList = list;
          } else {
            level.workList = level.workList.concat(list)
          }
        }
      }).finally(() => {
        if (cur == 1) {
          scroll.finishPullDown();
        } else {
          scroll.finishPullUp();
        }
        this.$nextTick(() => {
          scroll.refresh();
        });
      }).catch(() => { });
    },
  },
};
</script>

<style lang="less" scoped>
.page-one-type {
  height: 100%;

  .type-name {
    width: 100%;
    height: 61px;
    background: url(~@/assets/svg/port-name-bg-lg.svg) center no-repeat;
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 61px;
    letter-spacing: 8px;
  }

  .work-list-wrapper {
    margin-top: 25px;
    padding: 0 0px;
    // height: calc(100% - 86px);
    // overflow: hidden;

    overflow-y: auto;
    height: calc(100vh - 196px);

    .work-list {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      padding: 0px;

      .work-item {
        // margin-bottom: 20px;
        // // margin-left: 16px;
        // // margin-right: 16px;
        // margin: 0px 16px 20px 0px;
        // width: calc(25% - 32px);

        width: calc(25%);
        padding: 0 16px 16px 16px;
        // margin: 10px 16px;
        // margin-bottom: 20px;

        &:nth-child(4) {
          // margin-right: 0;
        }
      }
    }
  }

  .work-level-list-wrapper {
    display: flex;
    height: calc(100% - 116px);
    padding: 0 24px;

    .work-level-item {
      flex: 1 0 33.3%;
      max-width: 33.3%;
      padding: 0 10px;

      .work-level-item__title {
        padding-left: 18px;
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        background: url(~@/assets/lebel-title-bg.png) no-repeat;
        background-size: 100% 100%;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;

        &::before {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 10px;
          border-radius: 50%;
          content: '';
        }

        &.level-2 {
          color: #00e763;

          &::before {
            background-color: #00e763;
          }
        }

        &.level-1 {
          color: #ebff00;

          &::before {
            background-color: #ebff00;
          }
        }

        &.level-s {
          color: #ff0000;

          &::before {
            background-color: #ff0000;
          }
        }
      }

      .work-level-item__list {
        height: calc(100vh - 250px);
        overflow: hidden;
        padding-top: 10px;
      }

      .work-item+.work-item {
        margin-top: 10px;
      }
    }
  }

  .empty-box {
    text-align: center;
    margin-top: 10%;
  }
}
</style>
